<div class="page-header">
    <h1>
        房间管理
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            查看房间的信息；
        </small>
    </h1>
</div>
<div class="row">
    <div class="col-xs-12">
        <style>
            .camlist{overflow: hidden;clear:both;}
            .host{list-style:none;width: 352px;float: left;margin:0 10px;text-align:center;}
            .host p.video{margin-top: 0px;}
            .host p{margin-top: 5px; font-size: 14px;}
            .host h2{color:#666; margin-top: 5px;font-size: 16px;}
            .host h2 a{color:#999;}
        </style>
        <div id="dtpList_wrapper" class="dataTables_wrapper form-inline no-footer">
            <div class="row dataTables_header" style="display: block;">
                <div class="__dataTablesfilter">
                    <div id="dtpList_filter" class="dataTables_filter" style="display: block;">
                        <div>
                            <select id="dtpList_F_SType" class="selectpicker" data-style="btn btn-info btn-sm"
                                    data-width="90px" style="display: none;">
                                <option value="">模糊查询</option>
                                <option data-divider="true"></option>
                                <option value="NickName">用户昵称</option>
                                <option value="User_ID">用户ID/房间ID</option>
                            </select>
                            <input id="dtpList_F_SValue" class="fvalue" type="text">
                            <button id="dtpList_F_Btn" class="btn btn-xs btn-primary"><i
                                        class="fa fa-search bigger-110"></i> 查询
                            </button>
                        </div>
                    </div>
                </div>
                <div class="dataTables_length" id="dtpList_length"><label>每页
                        <select name="dtpList_length" aria-controls="dtpList" class="">
                            <option value="1">1</option>
                            <option value="8">8</option>
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                        </select> 条</label></div>
            </div>
            <table id="dtpList" class="dataTable table table-striped table-bordered table-hover no-footer" role="grid"
                   aria-describedby="dtpList_info" style="">
                <thead style="display: table-header-group;">
                <tr role="row">
                    <th class="center sorting_asc" rowspan="1" colspan="1" style="width: 20px;" aria-label="直播视频监控">直播视频监控</th>
                </tr>
                </thead>
                <tbody>
                <tr role="row">
                    <td class="center sorting_1" id="J_OrderList">
                        加载中...
                    </td>
                </tr>
                </tbody>
            </table>
            <div id="AjaxPagination" class="pagination"></div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="<%- Virtual_Path.Static %>jquery.plugin/pagination/pagination.css">
<script src="<%- Virtual_Path.Static %>jquery.plugin/pagination/pagination.js"></script>
<script>
    $(function () {
        var _ThisPage = {
            PageParm: {
                P_Get: true,
                Loading: false, //加载中
                Total: null,       //总条数
                MaxCode: "",    //MaxCode
                Start: 0,       //开始
                Length: 8,      //页长度
                IsLive:1,
                F_SType:null,
                F_SValue:null
            }
        };
        var ResultData = null;
        AnchorData();
        //搜索
        $('#dtpList_length select[name=dtpList_length]').on("change",function () {
            _ThisPage.PageParm.Length =$(this).val() ;//每页显示项
            AnchorData();
        });

        $('#dtpList_F_Btn').on('click', function () {
            var F_SValue = $('#dtpList_F_SValue').val();

            _ThisPage.PageParm.P_Get = true;
            _ThisPage.PageParm.Start = 0;
            _ThisPage.PageParm.F_SType ='';
            _ThisPage.PageParm.F_SValue = F_SValue;
            AnchorData();
        });
        function AnchorData() {
            $.ajax({
                url: '/ajax/user.user-anchor.page',
                type: 'post',
                dataType: 'json',
                data: {
                    Cache: true,
                    P_Get: _ThisPage.PageParm.P_Get,
                    P_MaxCode: _ThisPage.PageParm.MaxCode,
                    iDisplayStart: _ThisPage.PageParm.Start,
                    iDisplayLength: _ThisPage.PageParm.Length,
                    F_Live:_ThisPage.PageParm.IsLive,
                    F_SType:_ThisPage.PageParm.F_SType,
                    F_SValue:_ThisPage.PageParm.F_SValue
                },
                success: function (data) {
                    _ThisPage.PageParm.Loading = false;
                    if (data.flag !== 0) {
                        $.KOC.Tips.Open("Error", data.msg + "(" + data.flag + ")", {Timeout: 3000});
                        return;
                    }
                    _ThisPage.PageParm.Total = data.iTotalRecords;
                    ResultData = data;
                    if (data.aaData.length > 0) {
                        $("#AjaxPagination").empty().pagination(data.iTotalRecords, {
                            num_edge_entries: 2, //边缘页数
                            num_display_entries: 5, //主体页数
                            callback: PageCallback,
                            items_per_page: _ThisPage.PageParm.Length, //每页显示1项
                            prev_text: "前一页",
                            next_text: "后一页"
                        });
                    } else {
                        $("#AjaxPagination").empty();
                        $('#J_OrderList').empty().html('暂无开播艺人视频！');
                    }
                }
            })
        }
        function PageCallback(PageIndex) {
            console.log('PageIndex', PageIndex);
            if(_ThisPage.PageParm.P_Get){
                ShowResult(ResultData, PageIndex);
            }else{
                _ThisPage.PageParm.Start = _ThisPage.PageParm.Length * PageIndex;
                $.ajax({
                    url: '/ajax/user.user-anchor.page',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        P_Get: _ThisPage.PageParm.P_Get,
                        P_MaxCode: _ThisPage.PageParm.MaxCode,
                        iDisplayStart: _ThisPage.PageParm.Start,
                        iDisplayLength: _ThisPage.PageParm.Length,
                        F_Live:_ThisPage.PageParm.IsLive,
                        F_SType:_ThisPage.PageParm.F_SType,
                        F_SValue:_ThisPage.PageParm.F_SValue
                    },
                    success: function (data) {
                        ShowResult(data);
                    }
                });
            }
        }
        function ShowResult(data, PageIndex) {
            _ThisPage.PageParm.Loading = false;
            _ThisPage.PageParm.P_Get = false;
            if (data.flag !== 0) {
                $.KOC.Tips.Open("Error", data.msg + "(" + data.flag + ")", {Timeout: 3000});
                return;
            }
            _ThisPage.PageParm.Total = data.iTotalRecords;
            _ThisPage.PageParm.MaxCode = data.sMaxCode;
            var _html = '';
            if (data.aaData.length > 0) {
                _.forEach(data.aaData, function (ThisValue) {
                    _html += RenderPage(ThisValue);
                });
            }
            $('#J_OrderList').empty().html(_html);
        }
        function RenderPage(ThisValue) {
            var _html = '';
                var rtmpUrl = "rtmp://bf9.xiutv.com/xiyoulive/" + ThisValue.Live_Code+"_550";
                _html +=
                    '<div class="host">'+
                    '<p class="video">'+
                    '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="352" height="288" id="RtmpPlayer" align="middle">' +
                    '<param name="movie" value="<%- Virtual_Path.Static %>admin/player/RtmpPlayer.swf" />' +
                    '<param name="quality" value="high" />' +
                    '<param name="bgcolor" value="#ffffff" />' +
                    '<param name="play" value="true" />' +
                    '<param name="loop" value="false" />' +
                    '<param name="wmode" value="window" />' +
                    '<param name="scale" value="showall" />' +
                    '<param name="menu" value="true" /> ' +
                    '<param name="devicefont" value="false" />' +
                    '<param name="salign" value="" />' +
                    '<param name="allowScriptAccess" value="sameDomain" />' +
                    '<param name="allowFullScreen" value="true" /> ' +
                    '<param name="flashvars" value="rtmpurl=' + rtmpUrl + '" />' +
                    '<object type="application/x-shockwave-flash" data="<%- Virtual_Path.Static %>admin/player/RtmpPlayer.swf" width="352" height="288"> ' +
                    '<param name="movie" value="<%- Virtual_Path.Static %>admin/player/RtmpPlayer.swf" /> ' +
                    '<param name="quality" value="high" /> ' +
                    '<param name="bgcolor" value="#ffffff" /> ' +
                    '<param name="play" value="true" /> ' +
                    '<param name="loop" value="false" /> ' +
                    '<param name="wmode" value="window" /> ' +
                    '<param name="scale" value="showall" /> ' +
                    '<param name="menu" value="true" /> ' +
                    '<param name="devicefont" value="false" /> ' +
                    '<param name="salign" value="" /> ' +
                    '<param name="allowScriptAccess" value="sameDomain" /> ' +
                    '<param name="allowFullScreen" value="true" /> ' +
                    '<param name="flashvars" value="rtmpurl=' + rtmpUrl + '" /> ' +
                    '<a href="http://www.adobe.com/go/getflash"> ' +
                    '<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获得 Adobe Flash Player" /> ' +
                    '</a>' +
                    '</object> ' +
                    '</object> ' +
                    '</p>'+
                    '<h2>' +
                    '<a href="' + _VirtualPath.Main + 'room/' + ThisValue.User_ID + '" target="_blank">'+ThisValue.NickName+'</a>'+
                    '</h2>' +
                    '<p>' +
                    '<a href="' + _VirtualPath.Main + 'room/' + ThisValue.User_ID + '" target="_blank"> 冻结/解冻</a>'+
                    '</p>'+
                    '</div>';
            return _html;
        }
    });
</script>